import React, { Component } from "react";
import { Slider } from "@icedesign/base";
const slides = [
  {
    url: "https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png",
    text: "手机淘宝皮肤征集"
  },
  {
    url: "https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg",
    text: "阿里公益T恤设计大概"
  },
  {
    url: "https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg",
    text: "淘公仔设计大赛"
  },
  {
    url: "https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg",
    text: "磁带播放器换肤设计大赛"
  }
];
export default class Banner extends Component {
  static displayName = "Banner";

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div style={styles.container}>
        <Slider arrowSize="large" autoplay={true} pauseOnHover={true}>
          {slides.map((item, index) => (
            <div key={index}>
              <img src={item.url} alt={item.text} style={styles.wrapper} />
            </div>
          ))}
        </Slider>
      </div>
    );
  }
}

const styles = {
  container: {
    width: "100%",
    marginTop: "78px"
    // marginBottom: "1px"
    // backgroundImage: `url(${require("./images/banner.png")})`,
    // background: `rgb(122, 191, 247)`,
    // backgroundSize: "cover",
    // backgroundPosition: "50%",
    // backgroundRepeat: "no-repeat"
  },
  wrapper: {
    width: "100%"
  }
};
